<template>
  <div class="collapse">
    <div class="collapse-header">
      <div class="flex justify-content-start align-items-center">
        <i :class="icon"></i>
        <img v-if="imgSrc" :src="imgSrc" style="width: 14px; height: 14px" />
        <div class="collapse-header-text">{{ title }}</div>
      </div>
      <i
        class="collapse-header-arrow"
        :class="showList ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
        @click="toggleList"
      ></i>
    </div>
    <div class="collapse-list" v-show="showList">
      <template v-if="mutiple">
        <el-checkbox-group
          class="collapse-list"
          style="padding: 0; width: 100%"
          v-model="tempValue"
          size="small"
        >
          <div
            class="collapse-list-item"
            v-for="(item, index) in list"
            :key="index"
          >
            <el-checkbox
              :name="item.id + ''"
              :value="item.id"
              :label="item.id"
              >{{ item.name }}</el-checkbox
            >
          </div>
        </el-checkbox-group>
      </template>
      <template v-if="!mutiple">
        <div
          class="collapse-list-item"
          v-for="(item, index) in list"
          :key="index"
        >
          <el-checkbox :value="item.id == value" @change="select(item.id)">{{
            item.name
          }}</el-checkbox>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: "collapse",
  data() {
    return {
      selected: "",
      showList: true,
    };
  },
  computed: {
    tempValue: {
      get() {
        return this.value instanceof Array ? this.value : [];
      },
      set(ids) {
        this.$emit("on-select", ids);
        this.$emit("input", ids);
      },
    },
  },
  props: {
    icon: {
      type: String,
      default: "",
      require: false,
    },
    imgSrc: { type: String, default: "", require: false },
    value: {
      type: [String, Number, Array],
      default: "",
      require: true,
    },
    mutiple: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
      require: true,
    },
    list: {
      type: Array,
      default: () => [],
      require: true,
    },
  },
  methods: {
    select(id) {
      if (this.selected == id) {
        this.selected = "";
      } else {
        this.selected = id;
      }
      this.$emit("on-select", this.selected);
    },
    toggleList() {
      this.showList = !this.showList;
    },
  },
};
</script>

<style lang='less' scoped>
.collapse {
  background-color: white;

  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 9px;
    font-size: 13px;
    background: #deebff;
    color: #333;
    &-text {
      margin-left: 5px;
      justify-content: flex-start;
    }
    &-arrow {
      font-size: 16px;
    }
  }
  &-list {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 5px 20px;
    &-item {
      width: 33%;
      text-align: left;
      padding: 8px 0;
      overflow: hidden;
    }
  }
}
.el-checkbox {
  color: #333;
}
</style>